<!-- 
  业务：
    1. 获取详情数据并渲染
 -->
<template>
  <view>详情页面</view>

  <uni-forms label-width="100">
    <uni-forms-item label="交易类型">
      <radio-group>
        <label> <radio disabled :checked="state.type === 1" />买 </label>
        <label> <radio disabled :checked="state.type === 2" />卖 </label>
      </radio-group>
    </uni-forms-item>
    <uni-forms-item label="交易地址">
      <uni-easyinput :value="state.address" />
    </uni-forms-item>
    <uni-forms-item label="交易描述">
      <uni-easyinput :value="state.message" />
    </uni-forms-item>
    <uni-forms-item label="联系方式">
      <uni-easyinput :value="state.contact" />
    </uni-forms-item>
  </uni-forms>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";

const state = reactive<any>({});

const fetchData = async (id: string) => {
  const resp: any = await uni.request({
    url: "http://127.0.0.1:7001/trade/info/" + id,
    method: "GET",
  });
  // resp.data.data 是我们要的数据
  // state = resp.data.data;  错误的
  Object.assign(state, resp.data.data);
};

onLoad((query: any) => {
  // query 是上一个页面传递过来的参数
  console.log(query, "query onLoad");
  const { id } = query;

  // 调用 fetchData 方法
  fetchData(id);
});
</script>
